<template>
  <div class="exam-start">
    <div class="exam-start-bg">
      <div class="bg-img">
        <img class="white" src="@/assets/ceshi02.png" alt="">
        <img class="head-img" src="@/assets/ceshi03.png" alt="">
        <div class="cons">
          <p class="title">智保天赋·{{article_text}}试题</p>
          <p class="number">{{timu_num}}/38</p>
          <div class="progress">
            <span class="progress-active" :style="'width: '+progress_width"></span>
          </div>
          <p class="subject" v-html="content"></p>        
        </div>
        <div class="btn">
          <span class="left" @click="timu_save(1, timu_num)">A. 是的</span>
          <span class="right" @click="timu_save(0, timu_num)">B. 不完全是</span>
        </div>
      </div>
    </div>
  </div>
</template>

<script>

import confirmBox from '@/components/confirmBox'
import { getTimu, timuSave } from '@/api/api'

  export default {
    components: {
      confirmBox
    },
    data () {
      return {
        message: '',
        examList: [],
        timu_num: 0,
        content: '',
        is_click: false,
        progress_width: 0,
        article_text: '',
      }
    },
    created () {
      this.uid = sessionStorage.getItem('uid');
      if(this.$route.query.timu_num){
        this.timu_num = this.$route.query.timu_num;
        this.progress_width = this.timu_num* (1 / 38)*100 + '%';
      }
      this.article_type = this.$route.query.article_type;
      if(this.$route.query.miyao){
        this.miyao = this.$route.query.miyao;
      }
      this.get_timu();
      if(this.article_type == '2'){
        this.article_text = '成人';
      }else if(this.article_type == '1'){
        this.article_text = '少年';
      }else if(this.article_type == '0'){
        this.article_text = '儿童';
      }
    },
    methods: {
      get_timu() {
        this.timu_num++;
        if(this.timu_num > 38){
          this.timu_num = 38;
          localStorage.removeItem("timu_num");
          localStorage.removeItem("order_id");
          if(this.article_type == '2'){
            this.$router.push({path: './examResult', query: {order_id: this.order_id, article_type: this.article_type}});
          }else{
            this.$router.push({path: './examResultChild', query: {order_id: this.order_id, article_type: this.article_type}});
          }
          return;
        }
        var dataJson = {
          article_type: this.article_type,
          article_id: this.timu_num,
          order_id: this.order_id,
          uid: this.uid,
          miyao: this.miyao,
        }
        this.is_click = true;
        getTimu(dataJson).then((res) => {
          let content = res.data.info.content
          this.content = content.replace(/&lt;/g, "<").replace(/&gt;/g, ">").replace(/&amp;/g, "&").replace(/&quot;/g, '"').replace(/&apos;/g, "'");
        }).catch((err) => {
          console.dir(err)
        })
      },
      timu_save(is_true, timu_num) {
        if(!this.is_click){
          return;
        }
        this.is_click = false;
        var dataJson = {
          answer: is_true,
          article_id: this.timu_num,
          article_type: this.article_type,
          order_id: this.order_id,
          uid: this.uid,
          miyao: this.miyao,
        }
        // 做一条保存一次
        timuSave(dataJson).then((res) => {
          localStorage.setItem("timu_num", this.timu_num);
          this.progress_width = this.timu_num* (1 / 38)*100 + '%';
          if(res.data.info.order_id){
            this.order_id = res.data.info.order_id
            localStorage.setItem("order_id", this.order_id);
          }
        }).then(() => {
          this.get_timu()
        }).catch((err) => {
          console.dir(err)
        })
      }
    }
  }
</script>

<style lang="stylus" scoped>
  .exam-start-bg
    width 100%
    height 100vh
    background-image url('../../assets/ceshi01.png')
    background-size cover
    .bg-img
      width calc(100% - 2.5rem)
      position absolute
      top 50%
      left 1.25rem
      height 47rem
      margin-top -23.5rem
      .white
        width 100%
        height 100%
      .head-img
        position absolute
        top -2.4rem
        width 7.8rem
        height 7.8rem
        border-radius 50%
        overflow hidden
        left 50%
        margin-left -3.9rem      
      .btn
        position absolute
        bottom 3rem
        left 2.7rem
        span
          display block
          width 14rem
          float: left
          text-align center
          line-height 5rem
          height 5rem
          border-radius 100px
          font-size 1.7rem
          &:active
            position relative
            top .5rem
            transition all .1s
        .left
          color #333
          background-color #E6E6E6
          margin-right 2rem
        .right
          color #fff
          background-color #172F6D           
      .cons
        position absolute
        width 100%
        top 7rem
        .title
          color #33
          font-size 1.9rem
          text-align center
          height 2.5rem
          line-height 2.5rem
          font-weight bold
        .number
          color #172F6D
          font-size 1.3rem
          height 1.8rem
          line-height 1.8rem
          text-align center
          margin-top 1.5rem
        .progress
          width 70%
          margin-left 15%
          background-color #ccc
          border-radius 100px
          height .6rem
          position relative
          margin-top 1.3rem
          .progress-active
            width 50%
            display block
            position absolute
            left 0
            height .6rem
            background-color #172F6D
            border-radius 100px
        .subject
          width 70%
          margin-left 15%
          line-height 2.4rem
          font-size 1.5rem
          color #000
          margin-top 1.5rem
</style>
